<template>
  <WidgetContainer :data="data" :context-menu="contextMenu">
    <q-card class="q-pa-sm column full-height">
      <div class="widget-header text-h6 ellipsis relative-position">
        <q-btn flat dense icon="web"></q-btn>
        <span>{{ iframeData.title || iframeData.url }}</span>
        <div class="absolute-right">
          <q-icon class="cursor-pointer widget-header__append-icon"
                  name="refresh"
                  @click="refresh">
            <q-tooltip content-class="bg-primary" :offset="[10, 10]">刷新页面</q-tooltip>
          </q-icon>
        </div>
      </div>
      <div class="col scroll hide-scrollbar full-width" @contextmenu.stop.prevent>
        <iframe ref="page" class="widget-iframe" :src="iframeData.url"></iframe>
      </div>
    </q-card>
    <IframeWidgetEditForm
        v-model="formData"
        v-model:show="formShow"
        mode="update"
    ></IframeWidgetEditForm>
  </WidgetContainer>
</template>

<script>
import WidgetContainer from 'src/pages/workbench/components/WidgetContainer'
import widget from '../../../mixins/widget'
import IframeWidgetEditForm from './management/IframeWidgetEditForm'

export default {
  name: 'IframeWidget',
  mixins: [widget],
  components: {
    IframeWidgetEditForm,
    WidgetContainer
  },
  data () {
    return {
      options: ''
    }
  },
  computed: {
    iframeData () {
      return this.data.data || {}
    }
  },
  methods: {
    refresh () {
      this.$refs.page.src = this.iframeData.url
    }
  }
}
</script>

<style lang="scss">
.widget-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
